<template>
  <van-cell-group>
    <van-field class="van-cell--center" type="number" placeholder="请输入账号" name="account" required
      label="账号" v-model="formFields.account"
      :error="$validator.errors.has('account')" :error-message="$validator.errors.first('account')"
      data-vv-as="账号" v-validate="{required: true, min: 6, max: 6}"
    />

    <van-field class="van-cell--center" type="password" placeholder="请输入登陆密码" name="login_password" required
      label="登陆密码" v-model="formFields.login_password"
      :error="$validator.errors.has('login_password')" :error-message="$validator.errors.first('login_password')"
      data-vv-as="登陆密码" v-validate="{required: true, min: 6}"
    />

    <van-field class="van-cell--center" type="number" placeholder="请输入验证码" name="captcha" required
      label="验证码" v-model="formFields.captcha"
      :error="$validator.errors.has('captcha')" :error-message="$validator.errors.first('captcha')"
      data-vv-as="验证码" v-validate="{required: true, min: 4, max: 4}"
    >
      <img slot="icon" style="width: 90px;height: 30px" :src="captchaImg" @click="onClickCaptcha" alt="验证码"/>
    </van-field>

    <van-button type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">登陆</van-button>

    <van-cell :to="{name:'userForgetPassword'}" title=" " value="忘记密码" is-link/>
  </van-cell-group>
</template>

<script>
  import { Button, Cell, CellGroup, Field, Toast } from 'vant';
  import config from '@/config';
  import userApi from '@/api/user/index';
  import authService from '@/services/user/auth';

  export default {
    components: {
      [Button.name]: Button,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field
    },
    data() {
      return {
        captchaImg: config.ajaxApi+'/captcha/gregwar?w=90&h=30&modules=frontend',
        onButtonLoading: false,
        formFields: {
          account: '',
          login_password: '',
          captcha: ''
        },
        config
      }
    },
    methods: {
      onClickCaptcha() {
        this.captchaImg = config.ajaxApi+'/captcha/gregwar?w=90&h=30&modules=frontend&r='+Math.random();
      },
      onSubmit() {
        this.onButtonLoading = true;

        this.$validator.validateAll().then((isValid) => {
          if(isValid) {
            userApi.login(this.formFields).then((data) => {
              Toast(data.msg);
              if(parseInt(data.code) !== 0) {
                this.onButtonLoading = false;
                return false;
              }

              authService.setToken(data.token).then((value) => {
                setTimeout(() => {
                  this.$router.push({ name: 'userIndex' });
                }, 500);
              });
              /*
              this.formFields.account = '';
              this.formFields.login_password = '';
              this.formFields.captcha = '';
              */
              return true;
            });
          } else {
            Toast('请输入必要栏目');
            this.onButtonLoading = false;
            //this.onClickCaptcha();
          }

          return;
        });
      }
    }
  }
</script>
